<template>
	<!-- 热门 -->
	<view class="O-tuijian">
		<view class="header">
			<view class="mohu" v-show="ViewKou>=30">
				
			</view>
			<view class="zhanwei">
			</view>
			<view class="biao_ti">
				<text class="top-text">荟漫漫剧</text>
				<navigator url="/pages/index/sousuo/SOU" class="sousuo" :style="ViewKou>=30?'background-color: rgba(227, 227, 227, 0.3);':'background-color: #29293e;'">
					<image src="../../static/image/sousuo1.png" mode="scaleToFill"></image>
					搜索插图/漫画
				</navigator>
			</view>
		</view>
		<!-- 轮播图 -->
		<view class="Carousel-chart">
			<swiper class="swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay" :interval="interval" :duration="duration" >
				<swiper-item>
					<image @click="See(1)" class="xuni-beijing" src="https://xcx.xyhvip.cn/uploads/20240926/3d23193f05e3076f44cd6331808bfaea.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image  @click="See(2)" class="xuni-beijing" src="https://xcx.xyhvip.cn/uploads/20240926/512272066eba5d3cbc9f1ddff24fd3cc.jpg" mode="aspectFill"></image>
				</swiper-item>
				<swiper-item>
					<image  @click="See(3)" class="xuni-beijing" src="https://xcx.xyhvip.cn/uploads/20240926/c11de91372e63a5f75462c264c780220.jpg" mode="aspectFill"></image>
				</swiper-item>
			</swiper>
		</view>
		
		<!-- 精选推荐 -->
		<view class="Tui_jian">
			<view class="T-jian-top">
				<view class="nei-dh">
					<view style="font-size: 36rpx; color: #000000;">热门精选-限时福利</view>
					<view style="font-size: 26rpx; color: #7a7a7a; margin-top: 5rpx;">全站5k+免费看</view>
				</view>
			</view>
			<view class="er-dan">
				<view class="facilitate" v-for="(item,index) in JingSan" :key="index" @click="See(item)">
					<view class="img-kk">
						<image :src="item.f_image" mode="aspectFill"></image>
					</view>
					<text>{{item.title}}</text>
				</view>
				
			</view>
		</view>
		
		
		<!-- 广告 -->
		<view class="ad">
			<image src="https://xcx.xyhvip.cn/style/image/1.png" mode="aspectFill"></image>
		</view>
		<!-- 新作 -->
		<view class="san-ti">
			<view class="title-many">新作·叮~新鲜出炉！
				<!--标题 右侧 更多 -->
				<view class="title-right-top">
					<text>新作频道</text>
					<image src="../../static/image/youce.png" mode="aspectFill"></image>
				</view>
			</view>
			<view class="er-dan">
				<view class="facilitate" v-for="(item,index) in XinLiu" :key="index" @click="See(item)">
					<view class="img-kk">
						<image :src="item.f_image" mode="aspectFill"></image>
					</view>
					<text>{{item.title}}</text>
				</view>
				
			</view>
			<!-- 跟多-换一批 -->
			<view class="Change-batch">
				<view class="bat-pi">
					<image src="../../static/image/123.png" mode="aspectFill"></image>
					更多
				</view>
				<view class="bat-pi">
					<image src="../../static/image/456.png" mode="aspectFill"></image>
					换一批
				</view>
			</view>
		</view>
		
		<!-- 广告 -->
		<view class="ad">
			<image src="https://xcx.xyhvip.cn/style/image/2.png" mode="aspectFill"></image>
		</view>
		
		
		<!-- 两组排列 -->
		<view class="lie-lie">
			<view class="title-many">新人强推
				<!--标题 右侧 更多 -->
				<!-- <view class="title-right-top">
					<text>新作频道</text>
					<image src="../../static/image/youce.png" mode="aspectFill"></image>
				</view> -->
			</view>
			<view class="Part_II">
				<view class="block-ti" v-for="(item,index) in QaunALL" :key="index" @click="See(item)">
					<view class="s-img-jp">
						<image :src="item.f_image" mode="aspectFill"></image>
					</view>
					<view class="img-name-zp">{{item.title}}</view>
					<view class="jieshao_hailin" style="font-size: 24rpx; color: #7a7a7a;margin-left: 20rpx;">{{item.content}}</view>
				</view>
			</view>
		</view>
		
		
	</view>
</template>

<script>
	import W_request from '@/utis/api.js'
	export default {
		data() {
			 return {
				 indicatorDots: true,//是否显示指示点
				 autoplay: false,//自动播放
				 interval: 2000,//自动切换时间-间隔
				 duration: 500,//滑动动画时长
				 ViewKou:0,
				 //精选
				 JingSan:[],
				 XinLiu:[],
				 QaunALL:[]
			}
		},
		onPageScroll(e) {
			this.ViewKou = e.scrollTop;
		},
		onLoad() {
			this.ManAjax()
		},
		methods: {
			//请求
			ManAjax(){
				//精选
				W_request({
					url:"api/index/mhbanner",
				}).then(res=>{
					console.log(res.data.data);
					this.JingSan = res.data.data;
				},err=>{
					console.log(err)
				});
				//新作
				W_request({
					url:"api/index/liu",
				}).then(res=>{
					console.log(res.data.data);
					this.XinLiu = res.data.data;
				},err=>{
					console.log(err)
				});
				//全部
				W_request({
					url:"api/index/tai",
				}).then(res=>{
					console.log(res.data.data);
					this.QaunALL = res.data.data;
				},err=>{
					console.log(err)
				});
			},
			//跳转
			See(e){
				uni.navigateTo({
					url:`../../chakan/manju?id=${e.id}`
				});
			},
			//分类
			Fenlei(){
				uni.navigateTo({
					url:'/pages/shareFunctionPage/FenLei'
				})
			},
			//新作
			XinZuo(){
				uni.navigateTo({
					url:'/pages/shareFunctionPage/XinZuo'
				})
			},
			//排行
			paihang(){
				uni.navigateTo({
					url:'/pages/shareFunctionPage/PaiHang'
				})
			},
			//会员中心
			VIPTT(){
				uni.navigateTo({
					url:'/pages/shareFunctionPage/VIPtext'
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@font-face {
	  font-family: 'YouSheBiaoTiHei';
	  src: url('https://kuaiyinvideo.oss-cn-beijing.aliyuncs.com/ziti.ttf');
	}
		//topf00
		.O-tuijian{
			width: 100%;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			background-color: #fff;
			.mohu{
				width: 100%;
				height: 100%;
				backdrop-filter: blur(5px);
				background-color: rgba(255, 255, 255, 0.1); /* 透明度为50%的白色背景 */
				position: absolute;
				z-index: 1;
			}
			.header{
				width: 100%;
				height:150rpx;
				background-color: rgba(121, 121, 121, 0.4);
				display: flex;
				flex-direction: column;
				align-items: center;
				position: fixed;
				top: 0;
				z-index: 100;
				padding-bottom: 20rpx;
				.zhanwei{
					width: 100%;
					height: 100rpx;
				}
				.biao_ti{
					width: 93%;
					display: flex;
					align-items: center;
					position: relative;
					z-index: 50;
					.top-text{
						font-size: 40rpx;
						color:rgb(250,233,5);
						font-family: "YouSheBiaoTiHei";
					}
					.sousuo{
						width: 300rpx;
						height: 70rpx;
						// background-color: #8d8d8d;
						border-radius: 100rpx;
						display: flex;
						align-items: center;
						position: relative;
						font-size: 26rpx;
						color: #e2e2e2;
						margin-left: 30rpx;
						image{
							width: 40rpx;
							height: 40rpx;
							margin-left: 20rpx;
							margin-right: 15rpx;
						}
					}
				}
				
			}
		}
		
		.Carousel-chart{
			width: 100%;
			height: 660rpx;
			background-color: #000;
			// box-shadow: 0 0 13rpx 0 #ffaa7f;
			overflow: hidden;
			// margin-top: 80rpx;
			.swiper{
				width: 100%;
				height: 100%;
				swiper-item{
					.xuni-beijing{
						width: 100%;
						height: 100%;
						// filter: blur(5rpx);
						position: absolute;
					}
				}
			}
		}
		//分类
		.classification{
			width: 100%;
			height: 190rpx;
			background-color: #ffffff;
			border-radius: 30rpx;
			margin-top: -30rpx;
			z-index: 1;
			position: relative;
			display: flex;
			align-items:center;
			justify-content: center;
			.side-inner{
				width: 90%;
				height: 130rpx;
				display: flex;
				align-items: center;
				justify-content: space-around;
				.zi-ka{
					width: 200rpx;
					display: flex;
					// background-color: #ffaa7f;
					flex-direction: column;
					align-items: center;
					image{
						width: 50rpx;
						height: 50rpx;
					}
					text{
						font-size: 25rpx;
						margin-top: 10rpx
					}
				}
				.zi-ka:nth-child(1){
					image{
						width: 120rpx;
						height: 50rpx;
					}
				}
				.zi-ka:nth-child(3){
					image{
						width: 60rpx;
						height: 50rpx;
					}
				}
			}
		}
		
		//精选推荐
		.Tui_jian{
			width:89%;
			height: 420rpx;
			background-color: #ffffff;
			box-shadow:0 0rpx 15rpx 0 #dedede;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 20rpx;
			padding: 20rpx 20rpx;
			.T-jian-top{
				width: 100%;
				height: 80rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.nei-dh{
					width: 50%;
					font-size: 36rpx;
					font-family: 'YouSheBiaoTiHei';
					font-weight: 200;
					display: flex;
					flex-direction: column;
					
				}
			}
			// 第二部分
			.er-dan{
				width: 100%;
				height: 320rpx;
				// background-color: chartreuse;
				overflow: hidden;
				margin-top: 20rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.facilitate{
					width:210rpx;
					height: 100%;
					// background-color: #ffaa7f;
					overflow: hidden;
					border-radius: 15rpx;
					.img-kk{
						width:100%;
						height: 85%;
						background-color: #000;
						border-radius: 20rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					text{
						font-size: 26rpx;
					}
				}
			}
		}
		//共享标题-标题
		.title-many{
			width: 100%;
			height: 35rpx;	
			display: flex;
			font-size: 36rpx;
			font-family: 'YouSheBiaoTiHei';
			align-items: center;
			justify-content: space-between;
			.title-right-top{
				width:160rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 25rpx;
				font-family:none;
				color: #a8a8a8;
				
				image{
					width: 25rpx;
					height: 25rpx;
					margin-left: 9rpx;
				}
			}
		}
		// 精品 打滚推荐
		.three-tuijian{
			width: 93%;
			padding: 20rpx 0;
			// background-color: #ffaa7f;
			margin: 0 auto;
			margin-top: 50rpx;
			
			.Part_II{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 30rpx;
				.block-ti{
					width: 48%;
					height: 420rpx;
					background-color: #fafafa;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
					overflow: hidden;
					.s-img-jp{
						width: 100%;
						height: 320rpx;
						background-color: #000;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.img-name-zp{
						font-size: 26rpx;
						margin-top: 10rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		//换一批
		.Change-batch{
			width: 100%;
			height: 85rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			background-color: #fafafa;
			display: flex;
			align-items: center;
			justify-content: space-around;
			.bat-pi{
				width: 40%;
				height: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 23rpx;
				color: #7d7d7d;
				image{
					width: 30rpx;
					height: 30rpx;
					margin-right:10rpx;
				}
			}
		}
		// 广告
		.ad{
			width:93%;
			height: 230rpx;
			background-color: #7d7d7d;
			margin: 0 auto;
			margin-top: 50rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 30rpx;
			image{
				width: 100%;
				height: 100%;
				
			}
		}
		//排行榜	
		.the_charts{
			width:93%;
			padding: 30rpx 0rpx;
			background-image: linear-gradient(to top,#effdff,#e1faff,#9ce8ff);
			border-radius: 25rpx;
			margin: 0 auto;
			margin-top: 60rpx;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 30rpx;
			
			.personality-ttt{
				width:90%;
				height:160rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				position: relative;
				.ph-bj-tp{
					width: 360rpx;
					height: 360rpx;
					position: absolute;
					top: -290rpx;
					transform:rotateX(180deg);
					right:70rpx;
				}
				.ph-bang{
					font-size:50rpx;
					font-weight: 900;
					text-shadow: -6rpx -6rpx 0 #ffffff;
					position: relative;
					z-index: 10;
					margin-left: 10rpx;
					font-style: italic;
					color: #55aaff;
				}
				// 右侧
				.title-right-top{
					position: relative;
					z-index: 10;
					display: flex;
					align-items: center;
					justify-content: space-around;
					font-size: 28rpx;
					color: #3ab4ff;
					image{
						width: 35rpx;
						height: 35rpx;
					}
				}
			}
			//外层包裹
			.wai-tian-di{
				width:93%;
				// background-color: #000;
				overflow: hidden;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				.interconnect{
					width:31%;
					overflow: hidden;
					margin-bottom: 30rpx;
					.nei-top{
						width: 100%;
						height: 270rpx;
						overflow: hidden;
						border-radius: 20rpx;
						position: relative;
						.ph-zhutu{
							width: 100%;
							height: 100%;
						}
						.ph-futu{
							width: 50rpx;
							height: 50rpx;
							position: absolute;
							z-index: 20;
							top: 10rpx;
							right: 10rpx;
							
						}
					}
					.nei-bottom{
						display:flex;
						flex-direction: column;
						margin-top: 10rpx;
						.ph-img-name{
							font-size: 29rpx;
							color: #383838;
						}
						.ph-img-sign{
							font-size: 23rpx;
							color: #515151;
						}
					}
				}
			}
			//查看更多
			.chakan-gd{
				font-size: 30rpx;
				color: #7d7d7d;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-top: 15rpx;
				image{
					width:35rpx;
					height: 35rpx;
					margin-right: 10rpx;
				}
			}
		}
	
		// dddd-三排
		.san-ti{
			width:89%;
			// height: 420rpx;
			background-color: #ffffff;
			border-radius: 20rpx;
			margin: 0 auto;
			margin-top: 30rpx;
			padding: 20rpx 20rpx;
			overflow: hidden;
			// 第二部分
			.er-dan{
				width: 100%;
				// height: 320rpx;
				// background-color: chartreuse;
				overflow: hidden;
				margin-top: 40rpx;
				display: flex;
				align-items: center;
				flex-wrap: wrap;
				justify-content: space-between;
				.facilitate{
					width:210rpx;
					// background-color: #ffaa7f;
					overflow: hidden;
					border-radius: 15rpx;
					margin-bottom: 35rpx;
					.img-kk{
						width:100%;
						height: 270rpx;
						background-color: #000;
						border-radius: 20rpx;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					text{
						font-size: 26rpx;
					}
				}
			}
		}
		
		//两排
		.lie-lie{
			width:93%;
			overflow: hidden;
			margin: 0 auto;
			margin-top: 30rpx;
			.Part_II{
				width: 100%;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				margin-top: 30rpx;
				.block-ti{
					width: 48%;
					height: 560rpx;
					background-color: #fafafa;
					border-radius: 20rpx;
					margin-bottom: 30rpx;
					overflow: hidden;
					.jieshao_hailin{
						width: 90%;
						overflow: hidden;
						/* 不让文本换行 除非遇到br标签 */
						white-space:nowrap;
						/* 溢出文字用...代替 */
						text-overflow: ellipsis;
					}
					.s-img-jp{
						width: 100%;
						height: 450rpx;
						background-color: #000;
						overflow: hidden;
						image{
							width: 100%;
							height: 100%;
						}
					}
					.img-name-zp{
						font-size: 26rpx;
						margin-top: 10rpx;
						margin-left: 20rpx;
					}
				}
			}
		}
		
</style>